<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{padding: 0; margin: 0;}
			html,body{
				width: 100%;
				height: 100%;
				background: #000;
			}
			#box{
				width: 300px;
				height: 400px;
				margin: 10px auto 0;
			}
			.cube{
				width: 300px;
				height: 400px;
				position: relative;
				transform-style:preserve-3d ;
				animation: play 15s linear infinite ;
				
			}
			.cube div{
				width: 300px;
				height: 400px;
				position: absolute;
				left: 0;
				top: 0;
				-webkit-box-reflect: below 10px -webkit-linear-gradient(top,rgba(250,250,250,0),rgba(250,250,250,0.4) 30%,rgba(250,250,250,0.8));
				
			}
			.cube:hover{				
				animation-play-state: paused;
			}
			.cube div:nth-child(1){
				background: url(1.jpg) no-repeat  ;
				background-size: 100% 100%;
				transform: rotateY(36deg) translateZ(500px);
			}
			.cube div:nth-child(2){
				background: url(2.jpg) no-repeat;
				background-size: 100% 100%;
				transform: rotateY(72deg) translateZ(500px);
			}
			.cube div:nth-child(3){
				background: url(3.jpg) no-repeat;
				background-size: 100% 100%;
				transform: rotateY(108deg) translateZ(500px);
			}
			.cube div:nth-child(4){
				background: url(4.jpg) no-repeat ;
				background-size: 100% 100%;
				transform: rotateY(144deg) translateZ(500px);
			}
			.cube div:nth-child(5){
				background: url(5.jpg) no-repeat ;
				background-size: 100% 100%;
				transform: rotateY(180deg) translateZ(500px);
			}
			.cube div:nth-child(6){
				background: url(6.jpg) no-repeat ;
				background-size: 100% 100%;
				transform: rotateY(216deg) translateZ(500px);
			}
			.cube div:nth-child(7){
				background: url(7.jpg) no-repeat ;
				background-size: 100% 100%;
				transform: rotateY(252deg) translateZ(500px);
			}
			.cube div:nth-child(8){
				background: url(8.jpg) no-repeat ;
				background-size: 100% 100%;
				transform: rotateY(288deg) translateZ(500px);
			}
			.cube div:nth-child(9){
				background: url(10.jpg) no-repeat;
				background-size: 100% 100%;
				transform: rotateY(324deg) translateZ(500px);
			}
			.cube div:nth-child(10){
				background: url(9.jpg) no-repeat ;
				background-size: 100% 100%;
				transform: rotateY(360deg) translateZ(500px);
			}
			.cube div:nth-child(11){
				background: url(4.jpg) no-repeat ;
				background-size: 100% 100%;
				transform: rotateY(0deg);
			}
			.cube div:nth-child(12){
				background: url(5.jpg) no-repeat ;
				background-size: 100% 100%;
				transform: rotateY(90deg);
			}
			@keyframes play{
				from{transform:/*rotateX(0)*/ rotateY(0) /*rotateZ(0)*/;}
				to{transform:/*rotateX(360deg)*/ rotateY(360deg) /*rotateZ(360deg)*/;}
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div class="cube">
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
			</div>
		</div>
	</body>
</html>
